<template>
  <ScrollSelect
    v-bind="$props"
    @change="changeFun"
    ref="scrollSelect"
    @scrollBottom="scrollBottomFun"
  ></ScrollSelect>
</template>

<script>
import ScrollSelect from "./ScrollSelect";

// import { reg } from "@/utils/reg";
export default {
  props: {
    type: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: "mini"
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Array]
    },
    mutliple: { // 是否多选 默认单选
      type: Boolean,
      default: true
    },
    getDataApi: { // 获取列表数据的接口
      type: Function
    },
    placeholder: {
      type: String,
      default: "请选择"
    }
  },
  components: {
    ScrollSelect
  },
  created () {
    this.getHumanList(this.params, []);
  },
  data () {
    return {
      data: [],
      currentValue: "",
      params: {
        value: "",
        size: 10,
        current: 1
      }
    };
  },
  methods: {
    setData (data) {
      this.$refs.scrollSelect.setData(data);
    },
    getData () {
      return this.$refs.scrollSelect.getData();
    },
    // 获取数据
    getHumanList (params, sData) {
      this.getDataApi({
        size: params.size,
        current: params.current,
        param: params.value
      }).then(res => {
        if (res.data.data) {
          let data = res.data.data;
          this.data = sData.concat(data);
          this.$refs.scrollSelect && this.$refs.scrollSelect.setScrollData(this.data);
        }

      });
    },
    // 搜索框发生变化
    changeFun (value) {
      this.$refs.scrollSelect.setScrollTop();
      this.$refs.scrollSelect.setScrollData(this.data);
      this.currentValue = value;
      this.params = {
        value,
        size: 10,
        current: 1
      };
      this.getHumanList(this.params, []);
    },
    // 到底触发的逻辑
    scrollBottomFun () {

      this.params.current++;
      console.log(this.params);
      this.getHumanList(this.params, this.data);
    }
  }
};
</script>

<style>

</style>